<template>
  <!-- 歌曲详情 -->
  <div id="bottomPopup">
    <van-popup v-model="bottomPopup"
               position="bottom"
               closeable
               close-icon="arrow-down"
               close-icon-position="top-left"
               :style="{ height: '100%' }">
      <div class="songName">
        <p>{{ musicName }}</p>
        <p>{{ musicAuthor }}</p>
      </div>
      <div class="box"
           v-if="!lyricBool"
           @click="handeOpenLyric">
        <van-image :class="!playBool ? 'imgAvatar' : ''"
                   round
                   width="100%"
                   height="100%"
                   :src="musicPicUrl" />
      </div>
      <div ref="lyric"
           id="lyric"
           class="lyric"
           v-else
           @click="handeOpenLyric">
        <p v-for="(item, index) in lyric"
           :key="index"
           :style="item.time<Number(lyricTime.toFixed(0))+1&&Number(lyricTime.toFixed(0))<item.lastTime?'color:red':''">{{item.text}}</p>
      </div>

      <div class="iconBox">
        <van-grid :border="false">
          <van-grid-item>
            <template #icon>
              <van-icon name="like-o"
                        size="0.6rem" />
            </template>
          </van-grid-item>
          <van-grid-item>
            <template #icon>
              <van-icon name="down"
                        size="0.6rem" />
            </template>
          </van-grid-item>
          <van-grid-item>
            <template #icon>
              <van-icon name="chat-o"
                        size="0.6rem"
                        @click="handleOpenDiscuss" />
            </template>
          </van-grid-item>
          <van-grid-item>
            <template #icon>
              <van-icon name="ellipsis"
                        size="0.6rem" />
            </template>
          </van-grid-item>
        </van-grid>
        <div style="display: flex; background: #fff">
          <div class="current_time">
            <p>{{ currentTime }}</p>
          </div>
          <div class="percentage"
               @click="handlePercentage"
               ref="percentage">
            <van-progress ref="progress"
                          :percentage="percentage"
                          stroke-width="2"
                          :show-pivot="false"
                          :color="globalObj.normColor" />
          </div>
          <div class="total_time">
            <p>{{ playDuration }}</p>
          </div>
        </div>

        <van-grid :column-num="5"
                  :border="false">
          <van-grid-item>
            <template #icon>
              <van-icon name="replay"
                        size="18px" />
            </template>
          </van-grid-item>
          <van-grid-item>
            <template #icon>
              <van-image width="25"
                         height="25"
                         :src="lastSong"
                         @click="handleLast" />
            </template>
          </van-grid-item>
          <van-grid-item>
            <template #icon>
              <van-image width="50"
                         height="50"
                         :src="playMusic"
                         @click="handlePlay" />
            </template>
          </van-grid-item>
          <van-grid-item>
            <template #icon>
              <van-image width="25"
                         height="25"
                         :src="nextSong"
                         @click="handleNext" />
            </template>
          </van-grid-item>
          <van-grid-item>
            <template #icon>
              <van-image width="25"
                         height="25"
                         :src="playlist"
                         @click="handleOpenPlayList" />
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </van-popup>
    <Discuss ref="Discuss" />
  </div>
</template>

<script>
import { formatTime } from '../../currency'
import { getSongDetail, getLyric } from '@/api/songSheet'
import play from '@/assets/player/bofang.png'
import nextSong from '@/assets/player/xiayigexiayishou.png'
import lastSong from '@/assets/player/shangyishoushangyige.png'
import pause from '@/assets/player/pause.png'
import playlist from '@/assets/player/bofangliebiao.png'
import Discuss from '@/components/discuss'
export default {
  name: 'bottomPopup',
  props: {
    playDuration: String, // 音乐时长
    currentTime: String, // 当前秒
    lyricTime: Number,
  },
  data() {
    return {
      bottomPopup: false,
      songDtl: {},
      percentage: 0,
      musicPicUrl: '',
      musicName: '',
      musicAuthor: '',
      playMusic: play,
      nextSong: nextSong,
      lastSong: lastSong,
      playlist: playlist,
      lyric: [],
      lyricBool: false,
      pause: pause,
      play: play,
      playBool: false,
      newPercentage: 0,
      musicId: '',
      MucLength: 0,
    }
  },
  components: { Discuss },
  watch: {
    playBool(val) {
      val ? (this.playMusic = play) : (this.playMusic = pause)
    },
  },
  methods: {
    // 点击进度条
    handlePercentage(e) {
      let offsetX = e.offsetX // 点击的位置
      let clientWidth = this.$refs.percentage.clientWidth // 总宽度
      let newPercentage = offsetX / clientWidth
      this.$emit('handleClickPercentage', newPercentage)
    },
    // 评论
    handleOpenDiscuss() {
      this.$refs.Discuss.musicId = this.musicId
      this.$refs.Discuss.discussPopup = true
      this.$refs.Discuss.newComments = []
      this.$refs.Discuss.getInitData()
    },
    // 歌词
    handeOpenLyric() {
      this.lyricBool = !this.lyricBool
    },
    handleOpenPlayList() {
      this.$emit('handleOpenPlayList', 1)
    },
    // 上一首
    handleLast() {
      this.$emit('handleLast', 1)
      this.getMusicDtl()
      this.getMusicLyric()
      this.playMusic = pause
    },
    // 下一首
    handleNext() {
      this.$emit('handleNext', 1)
      this.playMusic = pause
    },
    // 播放/暂停
    handlePlay() {
      if (!this.playBool) {
        this.playBool = true
        this.playMusic = play
      } else {
        this.playBool = false
        this.playMusic = pause
      }
      this.$emit('handleInfoPlay', 1)
    },
    getMusicLyric() {
      getLyric(this.musicId).then((res) => {
        this.formatLyric(res.lrc.lyric)
      })
    },
    getMusicDtl() {
      let cookie = this.$store.state.userInfo.cookie
      getSongDetail(this.musicId, cookie).then((res) => {
        this.songDtl = res.songs[0]
        this.musicPicUrl = this.songDtl.al.picUrl
        this.musicName =
          this.songDtl.name.length > 15
            ? this.songDtl.name.slice(0, 15) + '...'
            : this.songDtl.name
        if (this.songDtl.ar.length > 1) {
          this.musicAuthor = ''
          this.songDtl.ar.forEach((item, index) => {
            if (index < this.songDtl.ar.length - 1) {
              this.musicAuthor += item.name + ' , '
            } else {
              this.musicAuthor += item.name
            }
          })
        } else {
          this.musicAuthor = this.songDtl.ar[0].name
        }
      })
    },
    async formatLyric(text) {
      let arr = text.split('\n')
      let row = arr.length //获取歌词行数
      let lyric = []
      let newLyric = []
      for (let i = 0; i < row; i++) {
        let temp_row = arr[i]
        let temp_arr = temp_row.split(']')
        let text = temp_arr.pop()

        await temp_arr.forEach((element) => {
          let obj = {}
          let time_arr = element.substr(1, element.length - 1).split(':')
          let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1])
          obj.time = s
          obj.text = text
          if (obj.text != '') {
            lyric.push(obj)
          }
        })
      }

      await lyric.forEach((item, index) => {
        newLyric.push(
          Object.assign(item, {
            lastTime: lyric[index + 1]
              ? lyric[index + 1].time
              : Number(this.MucLength.toFixed(0)),
          })
        )
      })
      this.lyric = newLyric
      // return newLyric
    },
  },
}
</script>

<style scoped>
#bottomPopup {
  background: #000;
}
@keyframes iconRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.imgAvatar {
  animation: iconRotate 10s linear infinite;
}
.box {
  width: 160px;
  margin: 0 auto;
  margin-top: 42%;
}
.songName {
  padding-top: 12px;
  text-align: center;
  width: 100%;
  position: fixed;
  height: 1rem;
  top: 0;
  background: #fff;
}
.songName p:nth-child(1) {
  font-size: 16px;
}
.songName p:nth-child(2) {
  font-size: 12px;
  color: rgb(99, 99, 99);
}
.current_time {
  width: 10%;
}
.percentage {
  width: 65%;
  margin: 10px auto;
}
.total_time,
.current_time {
  font-size: 0.35rem;
  width: 15%;
  text-align: center;
}
.iconBox {
  position: fixed;
  width: 100%;
  bottom: 0;
}
.lyric {
  padding: 10px;
  overflow: hidden;
  text-align: center;
  font-size: 0.4rem;
  margin-bottom: 4rem;
}
.lyric p {
  padding: 10px 0;
}
.lyricColor {
  font-size: 0.5rem;
  transition: 0.3s all;
}
#bottomPopup /deep/ .van-popup__close-icon--top-left {
  position: fixed;
}
</style>